import React, {PureComponent} from 'react';
import {Form, Input, Modal, Select, Steps,TreeSelect,message} from 'antd';
import DescriptionList from '@/components/DescriptionList';
const {Description} = DescriptionList;
const FormItem = Form.Item;
const {Step} = Steps;
const {TextArea} = Input;
const {Option} = Select;
const TreeNode = TreeSelect.TreeNode;

/***
 * 移动文件
 */
@Form.create()
class MoveFileForm extends PureComponent {

  state = {
    id: undefined,
  }

  onChange = (id) => {
    this.setState({id});
  }

  render() {
    const {modalVisible, form, handleMove, handleModalVisible, record, dirTreeList} = this.props;
    const move = () => {
      const { id } = this.state;
      // if(!id) {
        // message.error('请选择文件夹');
        // return
      // }
      handleMove(id, record)
    }


    const okHandle = () => {
      Modal.confirm({
        title: '移动文件夹',
        content: '确定移动到此文件夹？',
        okText: '确认',
        cancelText: '取消',
        onOk: move,
      });

    };
    const loop = data => data.map((item) => {
    if (item.children) {
      return (
        <TreeNode key={item.id} title={item.dirName} value={item.id}>
          {loop(item.children||[])}
        </TreeNode>
      );
    }
    return <TreeNode key={item.id} title={item.dirName} value={item.id}/>;
    });

    return (
      <Modal
        destroyOnClose
        title={'文件移动'}
        visible={modalVisible}
        onOk={okHandle}
        onCancel={() => handleModalVisible()}
      >
        <div style={{marginBottom:'10px'}}>目标文件夹：</div>
        <TreeSelect
          showSearch
          style={{ width: '100%' }}
          dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
          placeholder="默认为根目录"
          allowClear
          onChange={this.onChange}
        >
          {loop(dirTreeList||[])}
        </TreeSelect>
      </Modal>
    );
  }
}

export default MoveFileForm;
